<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片放大特效</title>
    <style>
        .box{width:350px;height:350px;border:1px solid #ccc;position:relative}
        .big{width:400px;height:400px;position:absolute;top:0;left:360px;border:1px solid #ccc;overflow:hidden;display:none}
        .mask{width:175px;height:175px;background:rgba(255,255,0,.4);position:absolute;top:0;left:0;cursor:move;display:none}
        .small{position:relative}
        .box img{vertical-align:top}
        #bigBox img{position:absolute}
      </style>
</head>
<body>
  <h2>图片放大特效</h2>
    <div class="box" id="box">
        <div id="smallBox" class="small">
          <img src="small.jpg">
          <div id="mask" class="mask"></div>
        </div>
        <div id="bigBox" class="big">
          <img id="bigImg" src="big.jpg">
        </div>
      </div>
      <script>
        // 需求：鼠标经过盒子 显示遮罩和大图 鼠标移动的时候 让遮罩跟着移动让大图按照比例移动
        function $(id) {    // 根据id值获取元素对象
           return document.getElementById(id);
        }
        // 鼠标经过盒子 显示遮罩和大图 
       $('smallBox').onmouseover = function() {
          $('mask').style.display = 'block';
          $('bigBox').style.display = 'block';
       };
       // 鼠标离开盒子 隐藏遮罩和大图
       $('smallBox').onmouseout = function() {
         //隐藏遮罩和大图
         $('mask').style.display = 'none';
         $('bigBox').style.display = 'none';
       };
       //  鼠标在盒子上移动的时候
       //  让遮罩跟着鼠标移动
       $('smallBox').onmousemove = function(event) {
         var event = event || window.event;
         //鼠标在页面中的坐标
         var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
         var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
         //  计算鼠标的位置 距 盒子 的距离
         var boxX = pageX - $('box').offsetLeft;
         var boxY = pageY - $('box').offsetTop;
         // 计算遮罩的位置
         var maskX = boxX - $('mask').offsetWidth / 2;
         var maskY = boxY - $('mask').offsetHeight / 2;
         // 限定遮罩可移动范围
         if (maskX < 0) {
           maskX = 0;
         }
         if (maskX > $('smallBox').offsetWidth - $('mask').offsetWidth) {
           maskX = $('smallBox').offsetWidth - $('mask').offsetWidth;
         }
         if (maskY < 0) {
           maskY = 0;
         }
         if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {
           maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;
         }
         //  修改遮罩的显示位置
         $('mask').style.left = maskX + 'px';
         $('mask').style.top = maskY + 'px';
         // 按照比例移动大图 大图片能够移动的总距离 = 大图的宽度 - 大盒子的宽度
         var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;
         // 遮罩能够移动的总距离 = 小盒子的宽度 - 遮罩的宽度
         var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;
         // 计算移动比例rate = 大图片能够移动的总距离/遮罩能够移动的总距离
         var rate = bigImgToMove / maskToMove;
         // 设置大图片当前的位置 = rate * 遮罩当前的位置
         $('bigImg').style.left = - rate * maskX + 'px';
         $('bigImg').style.top = - rate * maskY + 'px';
       };
      </script>
      <p><a href="default.html">返回首页</a></p>
      <p><a href="第八章.html">返回第八章</a></p>
      <p><a href="第九章.html">下一章</a></p>
</body>
</html>